<template>
 <!-- 筛选 -->
 <el-card class="box-card">
   <div slot="header" class="clearfix">
      <el-form :inline="true" :model="UCFilter" ref="UCFilter" size="small" class="demo-form-inline" label-width="70px">
        <div class="but" @click="newlyIncreased"><el-button type="success" size='small'><i class="el-icon-edit"></i> 新增目录</el-button></div>
      <el-form-item label="学科" prop="subject">
        <el-select v-model="UCFilter.subject" placeholder="请选择" class="size" @change="hBdetail">
          <el-option v-for="item in UCFilter.subjectList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录" prop="directory">
        <el-select v-model="UCFilter.directory" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.TowList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="simpletable">
        <el-select v-model="UCFilter.simpletable" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.simple" :key="item.table" :label="item.label" :value="item.table"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-input v-model="UCFilter.keyword" placeholder="请输入关键字" class="size"></el-input>
      </el-form-item>
      <el-form-item label="试题类型" prop="QuestionType">
        <el-select v-model="UCFilter.QuestionType" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.questionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度" prop="Difficulty">
        <el-select v-model="UCFilter.Difficulty" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.difficulty" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="Direction">
        <el-select v-model="UCFilter.Direction" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.direction" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人" prop="username">
        <el-select v-model="UCFilter.username" placeholder="请选择" class="size">
          <el-option v-for="item in UCFilter.enteringList" :key="item.id" :label="item.username" :value="item.permission_group_id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注" prop="remark">
        <el-input v-model="UCFilter.remark" placeholder="请输入题目备注" class="size"></el-input>
      </el-form-item>
      <el-form-item label="企业简称" prop="abbreviation">
        <el-input v-model="UCFilter.abbreviation" placeholder="请输入企业简称" class="size"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="Provinces">
        <el-select v-model="UCFilter.Provinces" placeholder="请选择" class="sizes" @change="harea">
          <el-option v-for="item in UCFilter.provinces" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="UCFilter.Citys" placeholder="请选择" class="sizes">
         <el-option v-for="item in UCFilter.citys" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="buts">
        <el-button @click="resetForm('UCFilter')">清除</el-button>
        <el-button type="primary" @click="hchoice">搜索</el-button>
      </el-form-item>
      </el-form>
   </div>
   <!-- tab栏切换 -->
   <el-tabs v-model="chkState" type="card" @tab-click="changeTab">
        <el-tab-pane label="全部" name='cx'></el-tab-pane>
        <el-tab-pane label="待审核" name='0'></el-tab-pane>
        <el-tab-pane label="已审核" name='1'></el-tab-pane>
        <el-tab-pane label="已拒绝" name='2'></el-tab-pane>
   </el-tabs>
   <!-- 总条数 -->
   <el-alert
    class="info"
      title=''
      type="info"
      show-icon>
      数据一共{{total}}条
   </el-alert>
   <!-- 数据列表 -->
   <div class="text item">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.questionType==='1'">单选</span>
        <span v-if="scope.row.questionType==='2'">多选</span>
        <span v-if="scope.row.questionType==='3'">简答</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="300">
      <template slot-scope="scope" >
         <span v-html="scope.row.question"></span>
      </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.difficulty==='1'">简单</span>
        <span v-if="scope.row.difficulty==='2'">一般</span>
        <span v-if="scope.row.difficulty==='3'">困难</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120">
      <template slot-scope="scope">
        <span v-if="scope.row.chkState===0">待审核</span>
        <span v-if="scope.row.chkState===1">已审核</span>
        <span v-if="scope.row.chkState===2">已拒绝</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="120">
      </el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120">
      </el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="120">
      <template slot-scope="scope">
         <span v-if="scope.row.chkState===0||scope.row.chkState===2">待发布</span>
         <span v-if="scope.row.chkState===1&&scope.row.publishState===1">已发布</span>
         <span v-if="scope.row.chkState===1&&scope.row.publishState===0">已下架</span>
      </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="210">
        <template slot-scope="scope">
          <el-button @click="preview(scope.row.id)" type="text" size="small">预览</el-button>
          <!-- 预览弹框 -->
           <el-dialog title="题目预览" @close="del" :visible.sync="dialogTableVisible" :append-to-body='true' :lock-scroll="false" width="80%">
             <el-row :gutter="20">
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.questionType==='1'">【题型】：单选题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.questionType==='2'">【题型】：多选题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.questionType==='3'">【题型】：简答题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【编号】：{{previewData.id}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.difficulty==='1'">【难度】：简单</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.difficulty==='2'">【难度】：一般</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="previewData.difficulty==='3'">【难度】：困难</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【标签】：{{previewData.tags}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{previewData.subjectName}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【目录】：{{previewData.directoryName}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{previewData.direction}}</div></el-col>
             </el-row>
             <hr>
             【题干】：
             <span v-html="previewData.question"></span>
              <!-- 单选 -->
             <div v-if="previewData.questionType==='1'">
               <div>单选题 选项：（以下选中的选项为正确答案）</div>
               <br>
               <template>
                 <el-radio v-model="item.isRight" v-for="item in previewData.options" :key="item.id" :label="1" style="display:block;margin-bottom:10px">{{item.title}}</el-radio><br>
               </template>
             </div>
             <!-- 多选 -->
             <div v-if="previewData.questionType==='2'">
               <div>多选题 选项：（以下选中的选项为正确答案）</div>
               <br>
               <template>
                 <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in previewData.options" :key="item.id" :label="item.title" style="display:block;margin-bottom:10px"></el-checkbox>
                 </el-checkbox-group>
               </template>
             </div>
             <!-- 简答不要选择框 -->
             <hr>
              【参考答案】：<el-button type="danger" size="small" @click.native="video">视频答案预览</el-button>
              <div v-if="videos" class="videoA">
                <video :src="previewData.videoURL" controls="controls" class="videoB"></video>
              </div>
              <hr>
              <span v-html="`【答案解析】：${previewData.answer}`"></span>
              <hr>
              <br>
              【题目备注】：{{previewData.remarks}}
           </el-dialog>
           <!-- 审核状态 -->
          <el-button type="text" size="small" class="shenhe"  @click="Apreview(scope.row.id)" :disabled="scope.row.chkState===0&&scope.row.publishState===1? false : true">审核</el-button>
          <!-- 审核弹框 -->
          <el-dialog title="题目审核" @close="del" :visible.sync="AdialogTableVisible" :append-to-body='true' :lock-scroll="false" width="35%">
            <el-form ref="auditData" :model="auditData" label-width="80px" class="audit">
                <el-radio-group v-model="auditData.resource">
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">拒绝</el-radio>
                </el-radio-group>
                <el-input type="textarea" v-model="auditData.desc" placeholder="请输入审核意见..." class="auditOpinion"></el-input>
              <el-form-item>
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="hchoiceCheck">确认</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <el-button type="text" size="small" @click="amend(scope.row.id)" :disabled="scope.row.publishState===1? false : true">修改</el-button>
          <el-button type="text" size="small" v-html="scope.row.publishState? '上架' : '下架'" @click="Bpreview(scope.row.id,scope.row.publishState)"></el-button>
          <!-- 上架弹框 -->
          <el-dialog
           title="提示"
           :visible.sync="BdialogTableVisible"
           :append-to-body='true'
           :lock-scroll="false"
           width="30%">
            <div class="align"><i class="el-icon-warning"></i><span><strong>您确定上架这道题目吗?</strong></span></div>
             <span slot="footer" class="dialog-footer">
               <el-button @click="BdialogTableVisible = false">取 消</el-button>
               <el-button type="primary" @click="hchoicePublish">确 定</el-button>
             </span>
           </el-dialog>
          <el-button type="text" size="small" @click="Cpreview(scope.row.id)" class="delete" :disabled="scope.row.publishState===1? false : true">删除</el-button>
          <!-- 删除弹框 -->
          <el-dialog
           title="提示"
           :visible.sync="CdialogTableVisible"
           :append-to-body='true'
           :lock-scroll="false"
           width="30%">
            <div class="align"><i class="el-icon-warning"></i><span><strong>此操作将永久删除该题目, 是否继续?</strong></span></div>
             <span slot="footer" class="dialog-footer">
               <el-button @click="CdialogTableVisible = false">取 消</el-button>
               <el-button type="primary" @click="handleClose">确 定</el-button>
             </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
   </div>
   <!-- 分页 -->
   <div class="block">
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="10"
      layout="total, prev, pager, next,jumper"
      :total='total'>
    </el-pagination>
   </div>
 </el-card>
</template>

<script>
// 引入精选题库和指定题目和试题审核和试题上下架和删除试题接口
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
// 引入学科列表接口
import { list } from '@/api/hmmm/subjects'
// 引入方向数据,难度数据,题型数据,学科二级目录和标签接口(学科详情接口)
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
// 引入录入人接口数据
import { list as enteringList } from '@/api/base/users'
// 引入二级目录接口
import { list as towList } from '@/api/hmmm/directorys'
// 引入标签接口
import { simple } from '@/api/hmmm/tags'
// 引入城市地区接口
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      // 审核的数据
      auditData: {
        resource: 1, // 审核状态
        desc: '', // 审核意见
        id: '' // 当前id
      },
      // 上下架的数据
      updownshelfData: {
        id: '', // 当前id
        publishState: '' // 上下架状态
      },
      // 删除的数据
      deleteData: {
        id: '' // 当前id
      },
      // 预览的数据
      previewData: {
        questionType: '', // 题型
        id: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        options: [], // 选项
        videoURL: '', // 解析视频地址
        answer: '', // 答案解析
        remarks: '' // 题目备注
      },
      videos: false, // 视频是否显示
      radio: '1', // 单选框默认选中
      checkList: [], // 多选默认选中框
      // 弹框显示隐藏
      dialogTableVisible: false,
      AdialogTableVisible: false,
      BdialogTableVisible: false,
      CdialogTableVisible: false,
      // 筛选的数据
      UCFilter: {
        subjectList: [], // 学科下拉框数据
        enteringList: [], // 录入人下拉框数据
        direction, // 方向下拉框数据
        difficulty, // 难度下拉框数据
        questionType, // 题型下拉框数据
        provinces: [], // 城市下拉框数据
        citys: [], // 地区下拉框数据
        TowList: [], // 二级目录列表数据
        simple: [], // 标签列表数据
        keyword: '', // 关键字下拉框选中的值
        subject: '', // 学科下拉框选中的值
        Difficulty: '', // 难度下拉框选中的值
        QuestionType: '', // 试题类型下拉框选中的值
        directory: '', // 二级目录下拉框选中的值
        Direction: '', // 方向下拉框选中的值
        username: '', // 录入人下拉框选中的值
        simpletable: '', // 标签下拉框中的值
        Provinces: '', // 城市下拉框中的值
        Citys: '', // 地区下拉框中的值
        remark: '', // 题目备注框中的值
        abbreviation: '' // 企业简称框中的值
      },
      chkState: 'cx', // tab初始不能为空和null
      page: 1, // 页码
      pagesize: 10, // 每页条数
      total: null, // 总条数
      tableData: [] // 数据列表的数据
    }
  },
  methods: {
    // 试题目录跳转
    newlyIncreased () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    // 修改跳转带id数据
    amend (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    // 关闭弹窗的回调
    del () {
      this.videos = false
    },
    // 控制视屏显示
    video () {
      this.videos = true
    },
    // tab栏切换
    changeTab () {
      this.page = 1
      this.hchoice()
    },
    // 请求精选题库数据列表
    hchoice () {
      // 当处于全部选项时把chkStatae置为null
      if (this.chkState === 'cx') {
        this.chkState = null
      }
      const data = {
        page: this.page, // 页码
        pagesize: this.pagesize, // 每页几条
        chkState: this.chkState, // 审核状态
        // subjectID: this.UCFilter.subject // 学科
        // difficulty: this.UCFilter.Difficulty, // 难度
        // questionType: this.UCFilter.QuestionType, // 试题类型
        // tags: this.UCFilter.simpletable, // 标签名称
        // province: this.UCFilter.Provinces, // 企业所在省份
        // city: this.UCFilter.city, // 企业所在地区
        keyword: this.UCFilter.keyword // 关键字
        // remarks: this.UCFilter.remark, // 题目备注
        // shortName: this.UCFilter.abbreviation, // 企业简称
        // direction: this.UCFilter.Direction, // 方向
        // creatorID: this.UCFilter.username, // 录入人
        // catalogID: this.UCFilter.TowList // 二级目录
      }
      choice(data).then(res => {
        // console.log(res)
        this.tableData = res.data.items
        this.total = res.data.counts
      })
      // 当点击的不是全部按钮时重新把name置为字符串 解决初始化不在全部项和点击全部项时需要点两次
      this.chkState = 'cx'
    },
    // 获取学科列表
    hlist () {
      const data = {
        pagesize: 20
      }
      list(data).then(res => {
        this.UCFilter.subjectList = res.data.items
        // console.log(res)
        // console.log(1)
      })
    },
    // 获取二级目录和标签
    hBdetail (val) {
      const data = {
        subjectID: val
      }
      // 获取二级目录
      towList(data).then(res => {
        // console.log(res)
        this.UCFilter.TowList = res.data.items
      })
      // 获取标签
      simple(data).then(res => {
        this.UCFilter.simple = res.data
        // console.log(this.UCFilter.simple)
      })
    },
    // 获取地区列表
    harea (val) {
      // console.log(11)
      this.UCFilter.citys = citys(val)
    },
    // 获取录入人接口
    henteringList () {
      enteringList().then(res => {
        this.UCFilter.enteringList = res.data.list
        // console.log(res)
      })
    },
    // 获取城市列表
    hprovinces () {
      this.UCFilter.provinces = provinces()
    },
    // 获取当前页码
    handleCurrentChange (val) {
      this.page = val
      this.hchoice()
    },
    // 预览弹框
    preview (id) {
      const data = {
        id: id
      }
      this.dialogTableVisible = true // 默认页面不显示为false,点击按钮将这个属性变成true
      // 获取当前点击的试题数据
      detail(data).then(res => {
        // console.log(res.data)
        this.previewData = res.data
        res.data.options.forEach(item => {
          if (item.isRight === 1) {
            this.checkList.push(item.title)
          }
        })
      })
    },
    // 审核弹框
    Apreview (id) {
      this.AdialogTableVisible = true // 默认页面不显示为false,点击按钮将这个属性变成true
      this.auditData.id = id
    },
    // 上下架弹框
    Bpreview (id, publishState) {
      this.BdialogTableVisible = true // 默认页面不显示为false,点击按钮将这个属性变成true
      this.updownshelfData.id = id
      if (publishState) {
        this.updownshelfData.publishState = 0
      } else {
        this.updownshelfData.publishState = 1
      }
    },
    // 删除弹框
    Cpreview (id) {
      this.CdialogTableVisible = true // 默认页面不显示为false,点击按钮将这个属性变成true
      this.deleteData.id = id
    },
    // 题目审核
    hchoiceCheck () {
      const data = {
        id: this.auditData.id,
        chkState: this.auditData.resource,
        chkRemarks: this.auditData.desc
      }
      // console.log(this.auditData.id)
      choiceCheck(data).then(res => {
        this.hchoice()
        this.AdialogTableVisible = false
        this.auditData.resource = 1
        this.auditData.desc = ''
      })
    },
    // 点击取消审核
    close () {
      this.auditData.resource = 1
      this.auditData.desc = ''
      this.AdialogTableVisible = false
    },
    // 试题上下架
    hchoicePublish () {
      const data = {
        id: this.updownshelfData.id,
        publishState: this.updownshelfData.publishState
      }
      choicePublish(data).then(res => {
        this.BdialogTableVisible = false
        this.hchoice()
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      })
    },
    // 试题删除
    hremove () {
      const data = {
        id: this.deleteData.id
      }
      remove(data).then(res => {
        this.hchoice()
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      })
    },
    // 关闭的回调再次确认操作
    handleClose (done) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.CdialogTableVisible = false
          this.hremove()
          done()
        })
        .catch(_ => {
          this.CdialogTableVisible = false
        })
    },
    // 清除表单数据
    resetForm (formName) {
      console.log(11)
      this.$refs[formName].resetFields()
      this.UCFilter.Citys = ''
      this.hchoice()
    }
  },
  mounted () {
    this.hchoice()
    this.hlist()
    this.henteringList()
    // 获取城市列表
    this.hprovinces()
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 15px;
}
.size{
  width: 140px;
}
.but{
text-align: right;
margin-bottom: 15px;
}
.sizes{
  width: 70px;
}
.buts{
  margin-left: 90px;
}
.block{
  text-align: right;
  margin-top: 15px;
}
.info{
  margin-bottom: 10px;
}
.box-cards{
  width: 100%;
}
.grid-content{
  margin-bottom: 20px;
}
.video{
  width: 300px;
  height: 200px;
}
.videoB{
  width: 350px;
}
.shenhe{
  margin: 0px 5px 0px 10px;
}
.auditOpinion{
  margin: 40px 0px 50px;
}
.audit{
  margin-left: 20px;
}
.el-icon-warning{
  color: #E6A23C;
  font-size: 25px;
  margin-right: 15px;
  margin-top: 10px;
  vertical-align: sub;
}
.delete{
  margin-left: 10px;
}
</style>
